<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta content="text/html;charset=UTF-8" http-equiv="Content-Type"/>
    <link href="https://www.baidu.com/favicon.ico" rel="shortcut icon">
    <title>登录</title>
</head>
<body>
<div style="text-align: center;margin-top: 30%;">
    <div>
        <span id="basic-addon1">用户名</span>
        <input aria-describedby="basic-addon1" id="user_name" name="username" placeholder="用户名" type="text"/>
    </div>
    <br/>
    <div>
        <span id="basic-addon2">密码</span>
        <input aria-describedby="basic-addon2" id="password" name="password" placeholder="密码" type="password"/>
    </div>
    <br/>
    <button style="width:190px;" th:onclick="login()">登 录</button>
</div>
</body>
<script type="text/javascript">
    function login() {
        // （1）创建异步对象
        const ajaxObj = new XMLHttpRequest();

        // （2）设置请求的参数。包括：请求的方法、请求的url。
        const username = document.getElementById("user_name").value;
        const password = document.getElementById("password").value;
        ajaxObj.open('post', '/login?username=' + username + '&password=' + password);
        ajaxObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        // （3）发送请求
        ajaxObj.send();

        //（4）注册事件。 onreadystatechange事件，状态改变时就会调用。
        //如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
        ajaxObj.onreadystatechange = function () {
            // 为了保证 数据 完整返回，我们一般会判断 两个值
            if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
                // 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
                // 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
                console.log('数据返回成功');

                // 数据是保存在 异步对象的 属性中
                console.log(ajaxObj.responseText);
                const json = JSON.parse(ajaxObj.responseText)
                if (json.success) {
                    window.location.href = "index"
                } else {
                    alert(json.msg)
                }

            }
        }
    }
</script>
</html>